<template>
  <div>
    <div class="course_wrap">
      <div class="course_title">———————课程编辑———————</div>
      <div class="courseInfo">
        <div class="info_head">
          <i class="el-icon-platform-eleme"></i>
          <span>课程信息</span>
        </div>
        <div class="course_form">
          <!-- 表单的左侧部分 -->
          <div class="form_left">
            <el-form>
              <el-form-item label="课程名称：">
                <el-input v-model="Cname"></el-input>
              </el-form-item>
              <el-form-item label="课程描述：">
                <el-input v-model="Cdescribe"></el-input>
              </el-form-item>
              <el-form-item label="课程价格：">
                <el-input v-model="Cprice"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="sureAdd"
                           type="success"
                           @click="sureAdd">保存课程</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 表单右侧部分 -->
          <div class="form_right">
            <div class="img_wrap">
              <div>
                <div>课程封面：</div>
                <img :src="upimgsrc">
              </div>
              <div class="img_btn">
                <a href="#"
                   @click="upimgsrc=''">清除</a>
                <a href="#"
                   @click="selectImg">选择封面</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 课程内容部分 -->
    <h1 class="con_title">课程内容</h1>
    <div class="course_content">
      <div class="con_left">
        <el-button type="success"
                   @click="dirFlag=true">添加目录</el-button>
        <el-table border
                  :data="dirList"
                  style="width:100%;"
                  @current-change="dirChange"
                  :highlight-current-row="true">
          <el-table-column label="目录"
                           prop="CDName">

          </el-table-column>
          <el-table-column label="课件数"
                           prop="CourseNumber">

          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="danger"
                           @click="delDir(scope.row._id,scope.row.CDid)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="con_right">
        <el-button type="success"
                   @click="changevideoFlag(true)">添加视频</el-button>
        <el-table border
                  style="width:100%;"
                  :data="videoList">
          <el-table-column label="视频名称"
                           prop="Vname"></el-table-column>
          <el-table-column label="视频时长"
                           prop="Vtime"></el-table-column>
          <el-table-column label="操作">
            <template>
              <div>
                <el-button type="danger">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 添加目录的弹出层 -->
    <el-dialog title="添加目录"
               :visible.sync="dirFlag"
               width="30%">
      <div>添加目录：<el-input v-model="CDName"></el-input>
      </div>
      <div>
        <el-button type="success"
                   @click="addDir">确定</el-button>
        <el-button type="primary">取消</el-button>
      </div>
    </el-dialog>
    <!-- 添加视频的弹出层 -->
    <el-dialog title="添加视频"
               :visible.sync="videoFlag"
               width="50%">
      <video-com :state="state"
                 :CDid="selCDid"
                 :dirid="selDirid"></video-com>
    </el-dialog>
    <!-- 图片上传弹出层 -->
    <el-dialog title="上传图片"
               :visible.sync="dialogVisible"
               width="30%">
      <!-- 文件上传框 -->
      <input type="file"
             id="myfile"
             accept="image/gif,image/jpeg,image/x-png"
             hidden
             @change="onFileChange($event)">
      <div class="up_wrap"
           v-if="upFlag">
        <el-input></el-input>
        <el-button type="success"
                   @click="addPic">选择图片</el-button>
      </div>
      <div v-if="!upFlag">
        <img class="uploadimg"
             :src="upimgsrc">
        <el-button type="success"
                   @click="sureUpload">上传</el-button>
        <el-button type="info"
                   @click="upFlag=true">清除</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { uploadImgApi, addCourseApi } from '../../api/course'
import { getCourseInfoApi, addDirApi, getCourseDirApi, delDirApi } from '../../api/course'
import videoCom from '../video/index'
import { mapGetters, mapMutations, mapActions } from 'vuex';
export default {
  name: "courseAdd",
  data () {
    return {
      dialogVisible: false,
      upFlag: true, //切换上传图片弹出层的显示内容
      upimgsrc: "",//制作的缩略图地址
      cpic: "",//上传成功后返回的图片地址
      Cdescribe: "",//课程描述
      Cname: "",//课程描述
      Cprice: "",//课程价格
      CID: "",//课程ID
      c_id: "",//课程的_id
      dirList: [], //目录表格数据
      dirFlag: false,//目录弹出层
      state: true,
      CDName: "",//目录名称
      selCDid: "",//选择目录后的课程id
      selDirid: "" //选择的目录id
    }
  },
  computed: {
    ...mapGetters("courseStore", ["videoFlag", "videoList"])
  },
  components: {
    videoCom
  },
  created () {
    // 接受课程列表页传来的参数
    this.CID = this.$route.params.CID
    this.c_id = this.$route.params.c_id
    console.log(this.CID, this.c_id)
    if (this.c_id) { //加入c_id 有值  是点击编辑跳转的页面
      getCourseInfoApi(this.CID, this.c_id).then(res => {
        console.log(res)
        this.Cname = res.data.courselist.Cname;
        this.Cprice = res.data.courselist.Cprice;
        this.Cdescribe = res.data.courselist.Cdescribe;

      })
      this.getDirList()//调用获取课程下的列表
    }
  },
  methods: {
    ...mapMutations("courseStore", ["changevideoFlag"]),
    ...mapActions("courseStore", ["getDirVideoAction"]),
    dirChange (row) { //选择目录切换
      console.log(row)
      this.selCDid = row.CDid; //课程id
      this.selDirid = row._id; //目录id
      this.getDirVideoAction([this.selDirid, this.selCDid])

    },
    async delDir (_id, CDid) { //删除目录
      var res = await delDirApi(_id, CDid)
      console.log(res)
      this.getDirList()//调用获取课程下的列表
    },
    async getDirList () {//获取课程下的目录列表
      var res = await getCourseDirApi(this.c_id)
      console.log(res)
      this.dirList = res.data.list;//赋值目录列表
    },
    async addDir () { //添加目录
      var res = await addDirApi({
        CDName: this.CDName,//目录名称
        CDid: this.c_id,//课程id
        ID: ""
      })
      console.log(res)
      this.CDName = "";
      this.dirFlag = false;
      this.dirList = res.data.list;//赋值目录列表
    },
    selectImg () {//点击选择图片
      this.dialogVisible = true;//打开弹出框
      this.upFlag = true;
    },
    addPic () {
      // 点击选择图片  弹出文件上传框
      document.getElementById("myfile").click();
    },
    onFileChange (e) {
      // 当选择完图片  触发change事件   制作缩略图 切换显示
      // 获取到文件上传框中的文件内容
      var files = e.target.files || e.dataTransfer.files;
      // 开始制作缩略图
      var url = URL.createObjectURL(files[0])
      this.upimgsrc = url;
      this.upFlag = false;
    },
    async sureUpload () { //确定上传图片的接口
      // 上传需要使用FormData()类型
      var myfile = document.getElementById("myfile");//获取到文件上传框中的文件内容
      var formData = new FormData();
      //formData.append(key,value)
      //                  随机的key            要上传的内容
      formData.append(new Date().getTime(), myfile.files[0])
      var res = await uploadImgApi(formData)
      console.log(res)
      if (res.success) {
        this.cpic = res.cacheName;//存储上传成功返回的图片地址
        this.dialogVisible = false;//关闭上传弹出框
      }
    },
    async sureAdd () { //保存课程基本信息 
      var res = await addCourseApi({
        Cdescribe: this.Cdescribe,
        Cname: this.Cname,
        Cprice: this.Cprice,
        Cpic: this.cpic
      })
      console.log(res)
      if (res.success) {
        this.$alert("课程添加成功")
        // 添加课程完成  存储课程id 
        this.c_id = res._id;
        this.CID = res.ID;
        // this.Cdescribe = ""
        // this.Cname = ""
        // this.Cprice = ""
        // this.cpic = ""
      }
    }
  },
}
</script>
<style lang="less" scoped>
.course_wrap {
  width: 1300px;
  margin: 10px auto;
  .course_title {
    background: #999;
    line-height: 100px;
    padding-left: 30px;
    box-sizing: border-box;
  }
  .courseInfo {
    .info_head {
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      border: 1px solid black;
      i {
        font-size: 40px;
        line-height: 40px;
      }
      span {
        line-height: 40px;
      }
    }
  }
}
.course_form {
  height: 256px;
  background: white;
  display: flex;
  .form_left {
    width: 50%;
    margin-top: 20px;
    .el-input {
      width: 80%;
    }
  }
  .form_right {
    width: 50%;
    .img_wrap {
      width: 30%;
      margin-top: 50px;
      text-align: left;
      margin-left: 50px;
      img {
        width: 100%;
        height: 92px;
      }
      .img_btn {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
.up_wrap {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.uploadimg {
  width: 200px;
  height: 150px;
}
.course_content {
  width: 1300px;
  margin: 20px auto;
  display: flex;
  justify-content: space-around;
  > div {
    width: 40%;
    background: white;
    height: 530px;
    text-align: center;
    padding: 20px 0;
    box-sizing: border-box;
  }
}
.con_title {
  text-align: center;
}
th {
  background: #999 !important;
  text-align: center;
}
</style>